<template>
  <div class="form-container">
    <label for="name">姓名</label>
    <input type="text" id="name" v-model="formData.name" placeholder="请输入收货人姓名" />

    <label for="phone">手机号码</label>
    <input type="tel" id="phone" v-model="formData.phone" placeholder="请输入手机号码" />
    <label for="verifyCode">手机验证码</label>
    <input
      type="number"
      id="verifyCode"
      v-model="formData.verifyCode"
      placeholder="请输入手机验证码"
    />
    <button id="sendVerifyCode">获取验证码</button>

    <label for="region">省市地区</label>
    <select id="region" class="select">
      <option value="">请选择省市地区</option>

      <option value="广东省 深圳市 福田区">广东省 深圳市 福田区</option>
      <option value="广东省 广州市 天河区">广东省 广州市 天河区</option>
      <option value="江苏省 南京市 鼓楼区">江苏省 南京市 鼓楼区</option>
    </select>
    <label for="address">详细地址</label>
    <textarea id="address" placeholder="请输入详细地址"></textarea>

    <button id="submitForm" class="submit-button">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: "",
        phone: "",
        verifyCode: "",
        region: "",
        address: "",
      },
      isSending: false,
      timeLeft: 60,
      regions: [
        // 添加省市地区选项
        // 示例选项
        { text: "广东省 深圳市 福田区", value: "广东省 深圳市 福田区" },
        { text: "广东省 广州市 天河区", value: "广东省 广州市 天河区" },
        { text: "江苏省 南京市 鼓楼区", value: "江苏省 南京市 鼓楼区" },
      ],
    };
  },
  computed: {
    verifyCodeButtonText() {
      return this.isSending ? `${this.timeLeft}s 后重新发送` : "获取验证码";
    },
  },
  methods: {
    sendVerifyCode() {
      if (this.isSending) return;

      this.isSending = true;

      const timer = setInterval(() => {
        this.timeLeft--;
        if (this.timeLeft === 0) {
          clearInterval(timer);
          this.isSending = false;
          this.timeLeft = 60;
        }
      }, 1000);
    },
    submitForm() {
      console.log(this.formData);
      // 清空表单
      this.formData = {
        name: "",
        phone: "",
        verifyCode: "",
        region: "",
        address: "",
      };
    },
  },
};
</script>

<style>
.form-container {
  padding: 20px;
  background-color: #fff;
}

label {
  display: block;
  margin-top: 10px;
}

input,
textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 8px;
}

.submit-button {
  width: 100%;
  height: 30px;
  background-color: #f03d3c;
  border: none;
  color: #fff;
}
.select {
  width: 100%;
}
#sendVerifyCode {
  margin-top: 5px;
  width: 100%;
  height: 30px;
  background-color: #f03d3c;
  border: none;
  color: #fff;
}
</style>
